<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-radio v-model="radio" label="1">备选项</sdn-radio>
      <sdn-radio v-model="radio" label="2">备选项</sdn-radio>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      radio: '1'
    };
  },
  setup() {
    const btnDesc = {
      title: "Radio 单选框",
      describe: "在一组备选项中进行单选。",
      codeBlock: `
<sdn-radio v-model="radio" label="1">备选项</sdn-radio>
<sdn-radio v-model="radio" label="2">备选项</sdn-radio>`,
      attrs: [{
        "name": "type",
        "describe": "类型",
        "type": "string",
        "emun": "success/info/warning/danger",
        "default": "—"
      }, {
        "name": "closable",
        "describe": "是否可关闭",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {
        "name": "disable-transitions",
        "describe": "是否禁用渐变动画",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE"
      }, {"name": "hit", "describe": "是否有边框描边", "type": "boolean", "emun": "—", "default": "FALSE"}, {
        "name": "color",
        "describe": "背景色",
        "type": "string",
        "emun": "—",
        "default": "—"
      }, {
        "name": "size",
        "describe": "尺寸",
        "type": "string",
        "emun": "medium / small / mini",
        "default": "—"
      }, {"name": "effect", "describe": "主题", "type": "string", "emun": "dark / light / plain", "default": "light"}],
      events: [{"name": "change", "describe": "绑定值变化时触发的事件", "params": "选中的 Radio label 值"}]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
